<template>
  <div>
    <div class="dialog-footer">
      <el-button type="primary" @click="updateSchedule">更 新</el-button>
      <!--      <el-button @click="closeDialog">取 消</el-button>-->
    </div>
  </div>
  <el-divider border-style="inset" class="divider-margin"></el-divider>
  <el-container>
    <el-header class="header">
      课程名称
      <div style="color: darkred; font-weight: bold">{{ courseScheduleRef.courseName }}</div>
    </el-header>
  </el-container>
  <el-divider border-style="dotted" class="divider-margin"></el-divider>
  <el-container>
    <el-header class="header">
      课程安排名称
      <div style="color: darkred; font-weight: bold">{{ courseScheduleRef.name }}</div>
    </el-header>
  </el-container>
  <el-divider border-style="dotted" class="divider-margin"></el-divider>
  <el-container>
    <el-header class="header">
      开课时间
      <div class="block" style="display: flex; align-items: center">
        <el-date-picker
          v-model="courseScheduleRef.chosenRangeTime"
          type="datetimerange"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          range-separator="至"
          size="default"
          :editable="false"
          :disabled-date="disableDate"
          value-format="YYYY-MM-DD HH:mm:ss"
          @change="choseDateTime"
          unlink-panels
        ></el-date-picker>
      </div>
    </el-header>
  </el-container>
  <el-divider border-style="dotted" class="divider-margin" style="margin-top: 20px"></el-divider>
  <el-container>
    <el-header class="header"> 教练 </el-header>
    <div><el-input size="default" readonly v-model="courseScheduleRef.coachName"></el-input></div>
    <el-table
      ref="coachSingleTableRef"
      :data="coachTableData"
      highlight-current-row
      height="200"
      size="default"
      @current-change="handleCoachChange"
    >
      <el-table-column prop="realName" fixed width="150" label="姓名" align="center" />
      <el-table-column prop="gender" label="性别" align="center">
        <template #default="scope">
          {{scope.row.gender === 'F' ? '女' : '男'}}
        </template>
      </el-table-column>
      <el-table-column prop="age" label="年龄" walign="center" />
      <el-table-column prop="domain" label="专长" show-overflow-tooltip align="center" />
    </el-table>
  </el-container>
  <el-divider border-style="dashed" class="divider-margin"></el-divider>
  <el-container >
    <el-header class="header"> 场地 </el-header>
    <div><el-input v-model="courseScheduleRef.venueName" size="default" readonly></el-input></div>
    <el-table
      ref="venueSingleTableRef"
      :data="venueTableData"
      highlight-current-row
      height="200"
      size="default"
      @current-change="handleVenueChange"
    >
      <el-table-column prop="name" fixed label="场地名称" align="center" />
      <el-table-column prop="address" label="场地地址" show-overflow-tooltip align="center" />
    </el-table>
  </el-container>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElTable } from 'element-plus'
import { tabsStore } from '@/stores/tabs.ts'
import {
  getCourseScheduleById,
  queryAvailableCoach,
  queryAvailableVenue,
  updateCourseSchedule
} from '@/api/course/schedule'
import {CourseSchedule} from '@/api/course/schedule/types.ts'
import type { Coach } from '@/api/coach/types.ts'
import type { Venue } from '@/api/resource/venue/types.ts'

const tab = tabsStore()

const router = useRouter()

const courseScheduleRef = ref<CourseSchedule>({})

const coachTableData = ref<Coach[]>([])
const venueTableData = ref<Venue[]>([])

const handleCoachChange = (val: Coach) => {
  courseScheduleRef.value.coachName = val.realName
  courseScheduleRef.value.coachId = val.id
}

const handleVenueChange = (val: Venue) => {
  courseScheduleRef.value.venueName = val.name
  courseScheduleRef.value.venueId = val.id
}

const disableDate = (time: Date) => {
  return time.getTime() < new Date().setHours(0, 0, 0, 0) // 禁止选择今天之前的日期
}

const choseDateTime = (val: string[]) => {
  courseScheduleRef.value.startTime = val[0]
  courseScheduleRef.value.endTime = val[1]
  queryAvailableCoach(val[0], val[1]).then((response) => {
    if (response.code == '00000') {
      coachTableData.value = response.data
    }
  })
  queryAvailableVenue(val[0], val[1]).then((response) => {
    if (response.code == '00000') {
      venueTableData.value = response.data
    }
  })
}

const updateSchedule = () => {
  if(!courseScheduleRef.value.startTime || !courseScheduleRef.value.endTime
    || courseScheduleRef.value.startTime === '' || courseScheduleRef.value.endTime === '') {
    ElMessage.error("没有安排时间")
    return false;
  }
  updateCourseSchedule(courseScheduleRef.value).then(() => {
    ElMessage.success("操作成功");
  })
  tab.editableTabs.pop()
  router.push({name: 'schedule-list'})
}

onMounted(() => {
  getCourseScheduleById(history.state.scheduleId).then((resp)=>{
    const data = resp.data;
    if(resp.code && resp.code == '00000' && data) {
      Object.assign(courseScheduleRef.value, data)
      courseScheduleRef.value.chosenRangeTime = [data.startTime, data.endTime];
    }
  })
})
</script>
<style scoped>
.header {
  color: #2c3e50;
  font-weight: bold;
  height: 40px;
  margin-top: 0px;
}
.divider-margin {
  margin: 10px 0;
}
.footer {
  margin-top: 20px;
}
</style>
